<template>
 <el-container>
   <el-header class="rigtop pdbt">
      <i class="fa el-icon-s-unfold" @click="clickFold" v-if="iconIf"></i> 
      <i class="fa el-icon-s-fold" @click="clickFold" v-if="!iconIf"></i>
      区域内计算公式信息
    </el-header>
      <el-main class="padding_top height">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="90px"
          label-position="right">
          <el-form-item label="有效性" prop="fValid" size="mini">
            <el-radio-group v-model="formData.fValid" >
              <el-radio v-for="(item, index) in fValidOptions" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择区域" prop="areaCd" size="mini">
            <el-select v-model="formData.areaCd" placeholder="请择选选择区域" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in areaCdOptions" :key="index" :label="item.areaCd"
                :value="item.areaCd" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公式方向" prop="fd" size="mini">
            <el-radio-group v-model="formData.fd"  @change="agreeChange">
              <el-radio v-for="(item, index) in fdOptions" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="有效范围" prop="arrrang" size="mini">
            <el-select v-model="arrrang" placeholder="请选择有效范围" clearable multiple @change='changeSelect' :style="{width: '100%'}">
              <el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox>
              <el-divider direction="horizontal" class="elCheckbox" ></el-divider>
              <el-option v-for="(item, index) in arrrangOptions" :key="index" :label="item.lable"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计算单元格" prop="calCell" size="mini">
            <el-input ref="calCell" v-model="formData.calCell" type="text" :style="{width: '100%'}" @focus="calCellFocus" placeholder="请输入计算单元格"></el-input>
          </el-form-item>
          <el-row type="flex" justify="start" align="bottom" class="el_row_btn">
              <el-form-item label-width="5px" label="" prop="field1">
              <el-button type="primary" size="mini" @click="btnClick('+', '加')">&#43;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field2">
              <el-button type="primary" size="mini" @click="btnClick('-', '减')">&#45;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field3">
              <el-button type="primary" size="mini" @click="btnClick('*', '乘')">&#42;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field4">
              <el-button type="primary" size="mini" @click="btnClick('/', '除')">&#47;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field5">
              <el-button type="primary" size="mini" @click="btnClick('(', '(')">&#40;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field6">
              <el-button type="primary" size="mini" @click="btnClick(')', ')')">&#41;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field7">
              <el-button type="primary" size="mini" @click="btnClick('{', '{')">&#123;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field8">
              <el-button type="primary" size="mini" @click="btnClick('}', '}')">&#125;</el-button>
              </el-form-item>
          </el-row>
          <el-row type="flex" justify="start" align="bottom" class="el_row_btn">
              <el-form-item label-width="5px" label="" prop="field9">
              <el-button type="primary" size="mini" @click="btnClick('&&', '与')">&#38;&#38;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field10">
              <el-button type="primary" size="mini" @click="btnClick('||', '或')">&#124;&#124;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field11">
              <el-button type="primary" size="mini" @click="btnClick('>', '大于')">&#62;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field12">
              <el-button type="primary" size="mini" @click="btnClick('>=', '大于等于')">&#62;&#61;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field13">
              <el-button type="primary" size="mini" @click="btnClick('==', '等于')">&#61;&#61;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field14">
              <el-button type="primary" size="mini" @click="btnClick('<', '小于')">&#60;</el-button>
              </el-form-item> <el-form-item label-width="5px" label="" prop="field15">
                <el-button type="primary" size="mini" @click="btnClick('<=', '小于等于')">&#60;&#61;</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field16">
              <el-button type="primary" size="mini" @click="btnClick('!=', '不等于')">&#33;&#61;</el-button>
              </el-form-item>
          </el-row>
          <el-form-item label-width="1px" label="" prop="field178">
              <el-input ref="m_input" v-model="formData.formula" type="textarea"  @focus="formulaFocus" placeholder="请输入表内计算公式······"
              :autosize="{minRows: 10, maxRows: 1000}" :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label-width="1px" label="" prop="field179">
              <el-input ref="n_input" v-model="formData.fDesc" type="textarea"  @focus="fDescFocus" placeholder="请输入计算解释······"
              :autosize="{minRows: 7, maxRows: 1000}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-form>
      </el-main>
       <el-footer style="text-align: center;">
            <el-button type="primary" size="mini" :disabled="dissavebtn" @click="submitForm">保存</el-button>
            <el-button size="mini" :disabled="dissavebtn" @click="clearForm">重置</el-button>
      </el-footer>
    </el-container>    
</template>
<script>
  import request from "@/utils/requestutil";
  import {getRealUrl, syncRequest} from "@/utils/httpRequet";
  import $ from "jquery";
  import treeExhide from "@/components/ztree/lib/jquery.ztree.exhide.min.js";
  import dicPanel from '@/hr/utils/dicPanel'
  import { options } from 'runjs';
  import psTree from '@/components/psTree/psTree';
  import { isNull } from 'xe-utils/methods';
  import functionSelector from '@/components/FunctionSelector/FunctionSelector'
export default {
  components: {
    psTree,
  },
  props: [],
  data() {
    return {
      iconIf: false,
      // isFold: '0',
      isFoldz: '',
      status:"NEW",//默认为添加
      proofid:"",
      checked:false,
      jsFlag: false,
      arrrang:[],
      dissavebtn: true,
      formData: {
        proofid: "",//主键
        areaCd: "",//分区码
        bzcode: "",//业务代码
        calCell: "",//计算单元格
        fd: "COL",//公式方向
        formula: "",//公式表达式
        fDesc: "",//公式说明
        fValid: "1",//有效性
        prsord: "",//计算顺序
        prUn: "",//管理单位
        rang: "",//行列范围
        tsCd: "",//索引表单号
        ttId: "",//任务标识
        command: "NEW",
      },
      rules: {
        fValid: [],
        areaCd: [{
          required: true,
          message: '请择选选择区域',
          trigger: 'change'
        }],
        fd: [],
        // arrrang: [{
        //   required: true,
        //   message: '请选择有效范围',
        //   trigger: 'change'
        // }],
        field178: "",
        field179: "",
      },
      fValidOptions: [{
        "label": "有效",
        "value": "1"
      }, {
        "label": "无效",
        "value": "0"
      }],
      areaCdOptions: [],
      fdOptions: [{
        "label": "行计算",
        "value": "ROW"
      }, {
        "label": "列计算",
        "value": "COL"
      }],
      arrrangOptions: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    clickFold() {
      if(this.isFold==='1'){
        this.isFold = '0'
        this.iconIf = false
      }else{
        this.isFold = '1'
        this.iconIf = true
      }
      this.isFoldz = this.isFold
      this.$emit('myclickFoldQY', this.isFoldz)
    },
    submitForm() {
      //获取填写或者输入的值
      let $t = this
      let fValid = this.formData.fValid;
      let areaCd = this.formData.areaCd;
      let fd = this.formData.fd;
      let formula = this.$refs.m_input.$refs.textarea.value;
      let fDesc = this.$refs.n_input.$refs.textarea.value;
      let arrrang = this.arrrang;
      if(areaCd == "" || isNull(areaCd) || areaCd == undefined){
        this.$message.warning("请选择区域！");
        return false;
      }
      if(arrrang.length == 0){
        this.$message.warning("请选择有效范围！");
        return false;
      }
      if(formula == "" || isNull(formula) || formula == undefined){
        this.$message.warning("请填写计算公式！");
        return false;
      }
      if(fDesc == "" || isNull(fDesc) || fDesc == undefined){
        this.$message.warning("请填写公式说明！");
        return false;
      }

      this.formData.formula = formula
      this.formData.fDesc = fDesc
      this.formData.rang = arrrang.toString()
      if (this.status == "NEW") {
        this.formData.prUn = this.$store.state.user.userInfo.deptId
        this.formData.command = "NEW"
      } else {
        this.formData.command = "UPDATE"
      }
      //console.log(this.formData);
      request({
        url: "editDcbjsQY",
        method: 'post',
        params: $t.formData,
      }).then((res) => {
        if(res.errorCode=='1'){
            $t.$message.success('保存成功')
            $t.dissavebtn = true
            this.$emit("aftersave",null);
        }else if(res.errorCode<0){
          this.$message({type:'error',message:"保存失败"});
        }
        // let _data = data //保存后的data
        // var s = $t.aftersave(_data, data)
        // if (s === false) return
      })
    },
    clearForm(){
      this.$refs['elForm'].resetFields();
      this.$refs.m_input.$refs.textarea.value = "";
      this.$refs.n_input.$refs.textarea.value = "";
    },
    clearAll() {
      this.status="NEW";
      this.$refs['elForm'].resetFields();
      this.formData.rang = ""
      this.arrrang = []
      this.$refs.m_input.$refs.textarea.value = "";
      this.$refs.n_input.$refs.textarea.value = "";
      this.dissavebtn = true
    },
    resetForm(obj) {
      this.status="NEW";
      this.$refs['elForm'].resetFields();
      this.formData.rang = ""
      this.arrrang = []
      this.$refs.m_input.$refs.textarea.value = "";
      this.$refs.n_input.$refs.textarea.value = "";

      this.formData.proofid = obj.val.proofid
      this.formData.areaCd = obj.val.areaCd
      this.formData.bzcode = obj.val.bzcode
      this.formData.calCell = obj.val.calCell
      this.formData.fd = obj.val.fd
      this.formData.formula = obj.val.formula
      this.formData.fDesc = obj.val.fDesc
      this.formData.fValid = obj.val.fValid
      this.formData.prsord = obj.val.prsord
      this.formData.prUn = obj.val.prUn
      this.formData.rang = obj.val.rang
      this.formData.tsCd = obj.val.tsCd
      this.formData.ttId = obj.val.ttId
      this.formData.command = "NEW"
      this.getQyData()
      this.agreeChange()
      this.dissavebtn = false
    },
      setData(obj){//用户列表点击一列赋值使用(先清空再赋值)
      console.log("setData",obj);
      if(obj.type == "UPDATE")
      {
        //console.log(obj.val);
        this.formData.fd=obj.val.fd;
        this.agreeChange()
        this.status="UPDATE";
        this.proofid=obj.val.proofid;
        this.formData.proofid=obj.val.proofid;
        this.formData.fValid=obj.val.fValid;
        this.formData.areaCd=obj.val.areaCd;
        this.formData.fd=obj.val.fd;
        this.arrrang=!obj.val.rang ? null : obj.val.rang.split(',');
        this.formData.rang = obj.val.rang;
        this.formData.prUn = obj.val.prUn;
        this.formData.calCell = obj.val.calCell;
        this.formData.formula = obj.val.formula;
        this.formData.fDesc = obj.val.fDesc;
        this.formData.prsord = obj.val.prsord;
        this.formData.command = "UPDATE";

        this.formData.bzcode = obj.val.bzcode;
        this.formData.fd = obj.val.fd;
        this.formData.tsCd = obj.val.tsCd;
        this.formData.ttId = obj.val.ttId;
        this.$refs.m_input.$refs.textarea.value = obj.val.formula;
        this.$refs.n_input.$refs.textarea.value = obj.val.fDesc;

        this.getQyData();
        this.dissavebtn = false
      }else{
        this.status = "NEW";
      }
    },
    selectAll() {
      this.arrrang = []
      if (this.checked) {
        this.arrrangOptions.map((item) => {
          this.arrrang.push(item.value)
        })
      } else {
        this.arrrang = []
      }
    },
    changeSelect(val) {
      if (val.length === this.arrrangOptions.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
  agreeChange(){
      this.$emit("jylxRadio", this.formData.fd);
      this.getYXFWData(this.formData.fd);
      this.arrrang = []
      this.$refs.m_input.$refs.textarea.value = "";
      this.$refs.n_input.$refs.textarea.value = "";
    },
    //加载选择区域
    getQyData(){
      request({
        url:"dygQYData",
        method:"post",
        params:{bzcode:this.formData.bzcode,ttId:this.formData.ttId,tsId:this.formData.tsCd}
      }).then((data) => {
        this.areaCdOptions = data.data
      })
    },
    //加载有效范围
    getYXFWData(clsAD){
      let _t = this;
      if("ROW" == clsAD){
        clsAD = "H";
      }else{
        clsAD = "V"
      }
       request({
        url:"getYXFWData",
        method:"post",
        params:{bzcode:_t.formData.bzcode,ttId:_t.formData.ttId,tsId:_t.formData.tsCd,clsAD:clsAD}
      }).then((data)=>{
        let strData = eval(data.data);
        _t.arrrangOptions=strData
        //_t.arrrang = [strData[0].value];
      })
    },
    //操作计算公式和公式解释
    btnClick(strNum){//用于追加或插入计算符号或要计算字段名称
      if (!this.jsFlag) {
        const myField = this.$refs.m_input.$refs.textarea;
        if (myField.selectionStart || myField.selectionStart === 0) {
          let startPos = myField.selectionStart;
          let endPos = myField.selectionEnd;
          myField.value = myField.value.substring(0, startPos) + strNum + myField.value.substring(endPos, myField.value.length);
          myField.focus();
          myField.selectionStart = startPos + strNum.length;
          myField.selectionEnd = startPos + strNum.length;
        } else {
          this.formData.formula += strNum
        }
      } else {
        this.formData.calCell = strNum.replace(" ", "")
      }
    },
    calCellFocus(val) {
      //console.log("calCellFocus",val);
      this.jsFlag = true
    },
    calCellBlur(val) {
      this.jsFlag = false
    },
    formulaFocus(val) {
      this.jsFlag = false
    },
    fDescFocus(val) {
      this.jsFlag = false
    },

  }
}

</script>
<style lang="scss" scoped>
.padding_top .el-form{
  padding: 0 10px;
}
// .padding_top{
//   max-height:calc(100vh - 210px);
// }

.el_row_btn .el-button--mini{
  padding:4px 6px;
  width:100%;
}
.padding_top .el_row_btn .el-form-item{
  margin-bottom: 0px;
  flex: 1;
  margin-top:0;
}
.padding_top .el-form-item{
  margin-top: 8px;
  margin-bottom: 8px;
}
.padding_top .el-textarea{
  margin-top: 8px;
  margin-bottom: 8px;
}
::v-deep .el-form-item--medium .el-form-item__label{
  text-align: right;
}
::v-deep .padding_top .el-form-item--medium .el-form-item__content{
  line-height: 30px;
}
.el-checkbox {
  text-align: right;
  width: 100%;
  padding-right: 10px;
}
.elCheckbox{
  margin:0px;
}
</style>
